<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0px;
				padding: 0px;
			}
			body{
				width:100vw;
				height:100vh;
			}
			.out_box{
				width:100%;
				margin-top: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				.slogan_box{
					font-weight: 300;
					font-size: 60px;
					color:#000;
				}
			}
		</style>
	</head>
	<body>
		<div class="out_box">
			<span class="slogan_box"></span>
		</div>
	</body>
</html>
<script type="module">
	import sloganApi from "./Api/sloganApi.js"
	
	let sloganIndex = 0;
	let charIndex = 0;
	const sloganBox = document.querySelector('.slogan_box');
	let sloganList = 0;
	let slogan = ''
	
	sloganApi.getSlogan().then(data =>{
		sloganList = data;
		start()
	})
	
	//模拟输入方法
	function start(){
		slogan = sloganList[sloganIndex];
		setTimeout(()=>{
			if(charIndex < slogan.length){
				sloganBox.innerHTML += slogan[charIndex];
				charIndex += 1
				start()
			}else{
				setTimeout(()=>{
					end()
				},2000)
			}
		},100)
	}
	
	
	//模拟删除方法
	function end(){
		setTimeout(()=>{
			if(charIndex > 0){
				charIndex -= 1
				sloganBox.innerHTML = slogan.substring(0,charIndex);
				end()
			}else{
				setTimeout(()=>{
					sloganIndex += 1
					if(sloganIndex >= sloganList.length){
						sloganIndex = 0
					}
					start()
				},1000)
			}
		},100)
	}
</script>
